<!-- 解锁咨询步骤条 -->
<template>
  <view class="bgf">
    <CooperationStepBar
      :current="getStep.stepIndex"
      :is-current-step-err="currentStepErr"
      :step-list="stepList"
    />

    <view class="pa-15">
      <view class="stepTips">
        <view class="disFlxAC">
          <TImage :src="logo" width="72rpx" height="72rpx" border-radius="10rpx" />
          <view class="pl-6">{{ name }}</view>
          <view class="pl-6">秘书处</view>
        </view>
        <view :class="getStep.class">{{ getStep.label }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import CooperationStepBar from '../../components/CooperationStepBar.vue';
  import { ref, unref, computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { propTypes } from '@/utils/propTypes';
  import { AuditStatusEnum } from '@/enums/cooperationEnum';
  import { isNullOrUnDef } from '@/utils/is';
  import type { PropType } from 'vue-types/dist/types';

  const props = defineProps({
    apStatus: Number as PropType<AuditStatusEnum>,
    logo: propTypes.string,
    name: propTypes.string,
    // info: propTypes.object.def({}),
  });

  const stepList = ref([
    {
      label: '申请合作',
      value: 1,
    },
    {
      label: '秘书处审核',
      value: 2,
    },
    {
      label: '合作成功',
      value: 3,
    },
  ]);

  const currentStepErr = ref(false);
  const getStepListValue = (index: number) => unref(stepList)[index].value;
  interface StepItem {
    stepIndex: number;
    label: string;
    class: string;
  }
  const step = new Map<AuditStatusEnum | 'default', () => StepItem>([
    [
      'default',
      () => {
        return {
          stepIndex: getStepListValue(-1),
          label: '',
          class: 'colorPrimary',
        };
      },
    ],
    [
      AuditStatusEnum.UNREVIEWED,
      () => {
        return {
          stepIndex: getStepListValue(1),
          label: '(待审核)',
          class: 'colorPrimary',
        };
      },
    ],
    [
      AuditStatusEnum.CLOSE,
      () => {
        currentStepErr.value = true;
        return {
          stepIndex: -1,
          label: '(已取消)',
          class: 'colorError',
        };
      },
    ],
    [
      AuditStatusEnum.PASSED,
      () => {
        return {
          stepIndex: getStepListValue(2),
          label: '(审核通过)',
          class: 'colorPrimary',
        };
      },
    ],
    [
      AuditStatusEnum.REJECT,
      () => {
        currentStepErr.value = true;
        return {
          stepIndex: -1,
          label: '(已拒绝)',
          class: 'colorError',
        };
      },
    ],
  ]);
  const getStep = computed(() => {
    return step.get(
      isNullOrUnDef(props.apStatus) ? 'default' : props.apStatus,
    )?.() as StepItem;
  });
</script>
<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-error: #ff3434;

  .stepTips {
    display: flex;
    height: 100rpx;
    background-color: #fff4e7;
    border-radius: 20rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    padding: 0 20rpx;
  }

  .colorPrimary {
    color: $color-primary;
  }

  .colorError {
    color: $color-error;
  }
</style>
